<!--  -->
<template>
  <div class="nav-bar">
    <ul>
      <li :class="{ active: currentNav === '网站首页' }">
        <router-link to="/">网站首页</router-link>
      </li>
      <li :class="{ active: currentNav === '学院新闻' }">
        <router-link to="/schoolnew">学院新闻</router-link>
      </li>
      <li :class="{ active: currentNav === '学院概况' }">
        <router-link to="/introduce">学院概况</router-link>
      </li>
      <li :class="{ active: currentNav === '通知公告' }">
        <router-link to="/collegenotice">通知公告</router-link>
        <div class="sub-menu">
          <ul class="twolist">
            <li>
              <router-link to="/collegenotice/collegetwo">2023通知</router-link>
            </li>
            <li>学院新比赛</li>
          </ul>
        </div>
      </li>
      <li :class="{ active: currentNav === '专业建设' }">
        <router-link to="/zyjs">专业建设</router-link>
        <div class="sub-menu">
          <ul class="twolist">
            <li>
              <router-link to="/">机械工程技术</router-link>
            </li>
            <li>机械工程</li>
          </ul>
        </div>
      </li>
      <li :class="{ active: currentNav === '学术科研' }">
        <a href="#" @click="handleClick('学术科研')">学术科研</a>
        <div class="sub-menu">
          <ul class="twolist">
            <li>
              <router-link to="/">科研项目</router-link>
            </li>
            <li>论文发表</li>
            <li>学术活动</li>
          </ul>
        </div>
      </li>
      <li :class="{ active: currentNav === '党建学工' }">
        <a href="#" @click="handleClick('党建学工')">党建学工</a>
        <div class="sub-menu">
          <ul class="twolist">
            <li>
              <router-link to="/">党建项目</router-link>
            </li>
            <li>学生工作</li>
            <li>研工会</li>
          </ul>
        </div>
      </li>
      <li :class="{ active: currentNav === '省级样板' }">
        <a href="#" @click="handleClick('省级样板')">省级样板</a>
        <div class="sub-menu">
          <ul class="twolist">
            <li>
              <router-link to="/">省级项目</router-link>
            </li>
            <li>省级开会</li>
            <li>省级学院</li>
          </ul>
        </div>
      </li>
      <li :class="{ active: currentNav === '招生就业' }">
        <a href="#" @click="handleClick('招生就业')">招生就业</a>
        <div class="sub-menu">
          <ul class="twolist">
            <li>
              <router-link to="/">招生计划</router-link>
            </li>
            <li>2023招生</li>
            <li>招生简介</li>
          </ul>
        </div>
      </li>
      <li :class="{ active: currentNav === '校企合作' }">
        <router-link to="/">校企合作</router-link>
      </li>
      <li :class="{ active: currentNav === '教学诊断' }">
        <router-link to="/">教学诊断</router-link>
      </li>
    </ul>
  </div>
</template>


<script>
export default {
  data() {
    return {
      // navList: [
      //   "网站首页",
      //   "学院新闻",
      //   "学院概况",
      //   "通知公告",
      //   "专业建设",
      //   "学术科研",
      //   "党建学工",
      //   "省级样板",
      //   "招生就业",
      //   "校企合作",
      //   "教学诊断",
      // ],
      currentNav: "", // 跟踪当前菜单
    };
  },
  methods: {
    // handleClick(nav) {
    //   const currentPath = this.$route.path;
    //   let targetPath = "";
    //   switch (nav) {
    //     case "网站首页":
    //       targetPath = "/";
    //       break;
    //     case "学院新闻":
    //       targetPath = "/schoolnew";
    //       break;
    //     case "学院概况":
    //       targetPath = "/introduce";
    //       break;
    //     case "通知公告":
    //       targetPath = "/collegenotice";
    //       break;
    //     case "专业建设":
    //       targetPath = "/zyjs";
    //       break;
    //     default:
    //       break;
    //   }

    //   if (currentPath !== targetPath) {
    //     this.$router.push(targetPath);
    //   }
    // },
    handleClick(nav) {
      this.currentNav = nav
    },
  },
  mounted() {
    this.currentNav = this.$route.name
  },
};
</script>

<style  scoped>
.nav-bar {
  display: flex;
  justify-content: center; /* 水平居中 */
  background-color: #0b6cb8;
  height: 50px;
  position: relative;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  font-size: 16px;
  color: #fff;
  padding: 15px 2px;
  cursor: pointer; /* 鼠标移上去显示手指 */
}
li a {
  font-size: 16px;
  color: #fff;
  padding: 15px 15px;
  cursor: pointer; /* 鼠标移上去显示手指 */
  text-decoration: none;
}
li:hover {
  background-color: rgb(0, 140, 255);
}
.sub-menu {
  position: absolute;
  padding-top: 15px;
  z-index: 999;
}
.twolist {
  display: flex;
  flex-direction: column; /* 添加这一行 */
  background-color: #0b6cb8;
  display: none;
  margin-left: -10px;
}
.nav-bar > ul > li:hover ul {
  display: block;
}
</style>
